import {
  Button,
  List,
  DatePicker,
  NavBar,
  Popup,
  Toast,
  Dialog,
} from "antd-mobile"
import classNames from "classnames"
import { useHistory } from "react-router-dom"
import styles from "./index.module.scss"
import { getUserProfile } from "@/store/actions/profile"
import { useInitialState } from "@/utils/use-initial-state"
import EditInput from "./components/EditInput"
import { useState } from "react"
import { useDispatch } from "react-redux"
import { updateUserProfile } from "@/store/actions/profile"
import { logout } from "@/store/actions/login"
const Item = List.Item

const ProfileEdit = () => {
  const history = useHistory()
  const dispatch = useDispatch()
  // 控制昵称的弹层显示
  const [inputVisible, setInputVisible] = useState(false)
  // 定义一个关闭弹层的函数
  const onInputHide = () => {
    setInputVisible(false)
  }
  // 定义提交时的函数
  const onSave = async (name: string) => {
    // 表示保存时调用 action
    await dispatch(updateUserProfile({ name })) // 修改昵称
    Toast.show("更新资料成功")
    // 关闭弹层
    onInputHide()
  }
  // 退出登录
  const logoutForm = () => {
    const handler = Dialog.show({
      title: "温馨提示",
      content: "亲，确定要退出吗",
      actions: [
        [
          {
            key: "cancel",
            text: "取消",
            onClick: () => {
              handler.close()
            },
          },
          {
            key: "confirm",
            text: "退出",
            style: {
              color: "var(--adm-color-weak)",
            },
            onClick: () => {
              // 分发action
              dispatch(logout()) // 触发Action  antd本身 需要
              // 将此弹窗关闭
              handler.close()

              // 需要跳转
              history.replace("/login")
              // 返回登录页面
            },
          },
        ],
      ],
    })
  }
  const { profile: UserProfile } = useInitialState(getUserProfile, "profile")
  return (
    <div className={styles.root}>
      <div className="content">
        {/* 标题 */}
        <NavBar
          onBack={() => history.goBack()}
          style={{
            "--border-bottom": "1px solid #F0F0F0",
          }}
        >
          个人信息
        </NavBar>

        <div className="wrapper">
          {/* 列表 */}
          <List className="profile-list">
            {/* 列表项 */}
            <Item
              extra={
                <span className="avatar-wrapper">
                  <img width={24} height={24} src={UserProfile.photo} alt="" />
                </span>
              }
              arrow
            >
              头像
            </Item>
            <Item
              arrow
              extra={UserProfile.name}
              onClick={() => setInputVisible(true)}
            >
              昵称
            </Item>
            <Item
              arrow
              extra={
                <span className={classNames("intro", "normal")}>
                  {UserProfile.intro || "未填写"}
                </span>
              }
            >
              简介
            </Item>
          </List>

          <List className="profile-list">
            <Item arrow extra={UserProfile.gender === 0 ? "男" : "女"}>
              性别
            </Item>
            <Item arrow extra={UserProfile.birthday}>
              生日
            </Item>
          </List>

          <DatePicker
            visible={false}
            value={new Date()}
            title="选择年月日"
            min={new Date(1900, 0, 1, 0, 0, 0)}
            max={new Date()}
          />
        </div>

        <div className="logout">
          <Button className="btn" onClick={logoutForm}>
            退出登录
          </Button>
        </div>
      </div>
      {/* 初始化一次之后 默认不会销毁 */}
      {/* 直接销毁组件内容 */}
      <Popup destroyOnClose visible={inputVisible} position="right">
        <EditInput
          onUpdateName={onSave}
          value={UserProfile.name}
          onClose={onInputHide}
        ></EditInput>
      </Popup>
    </div>
  )
}

export default ProfileEdit
